import React, {
  createRef,
  memo,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { Button, Tabs, Form, Input, Card, message } from "antd";
import { LoginWrapper } from "./style";
import HandleLogin from "./children/account";
import { CloseOutlined } from "@ant-design/icons";
import { ResetPasswordService, SendVerifyCodeService } from "@/service";
export default memo((props, context) => {
  const accountRef = createRef<any>();
  const PhoneRef = createRef<any>();
  const [isShow, setIsShow] = useState(false);

  const [resetForm, setResetForm] = useState({
    verify_code: "",
    email: "",
    password: "",
  });
  const SendCode = async () => {
    if (
      !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
        resetForm.email
      )
    ) {
      message.error("邮箱的格式不对！！！");
      return;
    }
    const res: any = await SendVerifyCodeService({
      email: resetForm.email,
    });
    if (res.code === 1) {
      message.error(res.msg + " 发送失败！");
      return;
    }
    message.success(res.msg);
    setTime(60);
    setIsNote(true);
  };

  const [isNote, setIsNote] = useState(false);
  const [time, setTime] = useState<any>(null);
  const timeRef = useRef<any>();

  // 验证码倒计时
  useEffect(() => {
    if (time && time != 0) {
      timeRef.current = setTimeout(() => {
        setTime((time: any) => time - 1);
      }, 1000);
    } else {
      setIsNote(false);
      clearInterval(timeRef.current);
    }
    return () => {
      clearInterval(timeRef.current);
    };
  }, [time]);

  // 重置密码
  async function handleResetPassClick() {
    if (
      resetForm.email === "" ||
      resetForm.password === "" ||
      resetForm.verify_code === ""
    ) {
      message.error("信息没有填写完整！！！");
      return;
    }
    if (
      !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
        resetForm.email
      )
    ) {
      message.error("邮箱的格式不对！！！");
      return;
    }
    const res: any = await ResetPasswordService(resetForm);
    if (res.code === 0) {
      message.success(res.msg);
      setIsShow(false);
      return;
    }
    message.error(res.msg);
  }
  function handleKeydownEvent(e: KeyboardEvent) {
    if (e.key == "Enter") accountRef.current.handleVerifyForm();
  }
  useEffect(() => {
    accountRef.current?.setLoginInfo();
    window.addEventListener("keydown", handleKeydownEvent);
    return () => {
      window.removeEventListener("keydown", handleKeydownEvent);
    };
  }, []);
  return (
    <LoginWrapper className={"overflow-hidden"}>
      <div
 
      className="box-container relative top-1/2 -translate-y-1/2 overflow-hidden login-box m-auto flex sm:w-full  lg:w-[900px] bg-no-repeat">
        {!isShow && (
          <>
            <div className="flex-1 flex justify-center items-center relative">
              <div className=" absolute left-0 h-full w-1/2 object-cover" style={{
                backgroundImage: "url('http://api.wewin888.cn/uploads/d5d0a7bc-8534-5890-adea-cd53414a792d.png')",
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center center",
                backgroundSize: "cover",
              }}></div>
              <div className="rounded z-50 py-3 w-72 h-60 bg-white/80 shadow-2xl">
                <div className="flex justify-around">
                  <h1 className="font-bold">账号登录</h1>
                </div>
                <HandleLogin ref={accountRef}>
                  <span onClick={() => setIsShow(true)}>忘记密码</span>
                </HandleLogin>
              </div>
            </div>
          </>
        )}
        <div
          style={{ height: !isShow ? "0" : "100%" }}
          className="absolute bottom-0 w-full  duration-300 transition-all ease-linear overflow-hidden flex justify-center items-center"
        >
          <CloseOutlined
            onClick={() => setIsShow(false)}
            className="absolute top-0 right-3 m-5 hover:text-red-500 text-white text-2xl hover:rotate-180 transition-all duration-300 z-10"
          />

          <Card
            style={{ background: "rgba(255,255,255,0)" }}
            className="h-full border-none w-full flex justify-center items-center"
          >
            <Form
              style={{
                background: "rgba(255,255,255, .5)",
                borderRadius: "5px",
                padding: "20px",
              }}
              preserve={false}
              labelCol={{ span: 4 }}
            >
              <Form.Item>
                <h1 className={"text-2xl"}>找回密码</h1>
              </Form.Item>

              <Form.Item label="邮箱">
                <Input
                  value={resetForm.email}
                  onChange={(e) =>
                    setResetForm({ ...resetForm, email: e.target.value })
                  }
                  placeholder="请输入邮箱"
                />
              </Form.Item>
              <Form.Item label="密码">
                <Input
                  onChange={(e) =>
                    setResetForm({ ...resetForm, password: e.target.value })
                  }
                  placeholder="需要重置的密码"
                />
              </Form.Item>
              <Form.Item label="验证码">
                <div className="flex">
                  <Input
                    onChange={(e) =>
                      setResetForm({
                        ...resetForm,
                        verify_code: e.target.value,
                      })
                    }
                    placeholder="请输入验证码！"
                  />
                  <Button
                    disabled={isNote}
                    className="ml-2 w-24"
                    onClick={() => SendCode()}
                  >
                    {isNote ? <span>{time}s</span> : "获取验证码"}
                  </Button>
                </div>
              </Form.Item>
              <Form.Item>
                <Button onClick={() => handleResetPassClick()}>重置密码</Button>
                <Button onClick={() => setIsShow(!isShow)}>返回</Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    </LoginWrapper>
  );
});
